import React, {useState} from 'react';
import EchartBase from '@component/echartBase';
import AmountChart from '@component/amountChart';

import {regions} from '../../utils/templDate';


export default () => {
	let pieOption = {
		grid: {
			top: 40
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b}: {c} ({d}%)'
		},

		color: ['#696969', '#00008B', '#8A2BE2', '#5F9EA0', '#20B2AA', '#00CED1'],
		legend: {
			orient: 'vertical',
			right: -5,
			top: 70,
			data: ['山东', '浙江', '上海', '河北', '江苏', '安徽'],
			textStyle: {
				color: '#fff'
			}
		},
		series: [
			{
				name: '装机容量',
				type: 'pie',
				radius: ['36%', '56%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: '20',
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: regions,
			}
		]
	}

	return (
		<div className="base-right">
			<EchartBase options={pieOption} id="zhuangji"  style={{
				width: '280px'
			}}/>
		</div>

	)
}
